import { Space, Table, message, Popconfirm } from 'antd';
import React from 'react';
import axios from 'axios'
import { useState, useEffect } from 'react';
import api from '../../server/Api';
import 'antd/dist/antd.min.css';
import './basePrice.css';
import AddBase from './addBase';

let bpId = ''
let bpState = ''

export default function BasePrice() {
  const columns = [
    {
      title: '客户类型',
      dataIndex: 'unit',
      key: ''
    },
    {
      title: '计费类型',
      dataIndex: 'basicPriceType', key: ''
    },
    {
      title: '基价名称',
      dataIndex: 'basicPriceName', key: ''
    },
    {
      title: '基价金额  元/吨',
      dataIndex: 'basicPrice', key: ''
    },
    {
      title: '使用状态',
      dataIndex: 'state', key: ''
    },
    {
      title: '操作', key: '',
      render: (_, record) => {
        let text = '作废';
        let Re= true
        const recordId = record

        if (record.state != 1) {
          text = '恢复'
          Re = false
        }
        return (
          <>
            <Popconfirm
            title='确认该操作'
              onConfirm={confirm}
              onCancel={cancel}
              okText="确认"
              cancelText="取消"
            >
              <a onClick={() => UpDataState(record.basicPriceId, record.state)}
                  className={Re? 'red' : 'green'}>
                {text} <span></span> 
              </a>  
            </Popconfirm>

            <Popconfirm
              title='确认删除？'
              onConfirm={confirmDelete}
              onCancel={cancel}
              okText="确认"
              cancelText="取消"
            >
                <a onClick={() => deleteBase(record.basicPriceId)} className="Delete"><span></span>删除</a>
            </Popconfirm>
          </>
        );
      },
    }
  ]

  // 在函数式组件里面使用useSate来定义了数据 []就是初始值 setDate是在给data赋值时使用
  

  let [data, setDate] = useState([]);
  useEffect(() => {
    getBasicPriceInfo()
  }, []);

  const fn = function (arg) {
    getBasicPriceInfo()
  }
  // 作废
  const UpDataState = (value1, value2) => {
    bpId = value1;
    bpState = value2;
  }
  const confirm = () => {
    console.log(bpId);
    console.log(bpState);
    axios.post(`${api}/editBasicPriceState`, { id: bpId, state: bpState }
    ).then(response => {
      getBasicPriceInfo()
    }).catch(function (error) { })
  }
  // 删除
  const deleteBase=(value1)=>{
    bpId = value1
  }
  const confirmDelete = () => {
    console.log(bpId);
    console.log(bpState);
    axios.post(`${api}/deleteBasicPrice`, { id: bpId}
    ).then(response => {
      getBasicPriceInfo()
    }).catch(function (error) { })
  }
  // 取消操作
  const cancel = (e) => {
    console.log(e);
    message.error('否');
  };

  const getBasicPriceInfo = () => {
    axios.get(`${api}/getAllBasicPriceInfo`, {
      params: {
        pagesize: 5,
        pagenum: 1,
      }
    }).then(response => {
      console.log(response.data);
      let data = response.data.data;
      setDate(data)
    }).catch(function (error) {
      console.log(error);
    })
  }
  return <>
  <div >
    <AddBase data={data} fn={fn} />
    <Table columns={columns} dataSource={data} rowKey={record => record.basicPriceId} className="tb"/>
  </div>
    
  </>
}